<template>
  <div class="interview-container">
    <h1 class="title">AI 模拟面试</h1>

    <!-- 对话区 -->
    <div class="chat-box">
      <div v-for="(msg, index) in messages" :key="index" 
           :class="['chat-message', msg.role]">
        <strong v-if="msg.role === 'assistant'">面试官：</strong>
        <strong v-else>我：</strong>
        {{ msg.content }}
      </div>
    </div>

    <!-- 输入框 + 操作按钮 -->
    <div class="input-box" v-if="!isFinished">
      <textarea
        v-model="userInput"
        placeholder="请输入你的回答..."
        rows="3"
      ></textarea>
      <div class="actions">
        <button @click="sendMessage" :disabled="!userInput || loading">
          {{ loading ? "等待AI回复..." : "发送" }}
        </button>
        <button @click="finishInterview">面试结束</button>
      </div>
    </div>

    <!-- 结束提示 -->
    <div v-else class="end-message">
      <p>🎉 面试结束，内容已保存到本地文件！</p>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import axios from "axios";

const API_KEY = "替换成你的DeepSeek API Key"; // ⚠️ 测试用

const messages = ref([
  { role: "assistant", content: "欢迎来到AI模拟面试！请先做一下自我介绍。" },
]);
const userInput = ref("");
const isFinished = ref(false);
const loading = ref(false);

// 发送用户回答并获取AI回复
const sendMessage = async () => {
  const input = userInput.value.trim();
  if (!input) return;

  // 推入用户消息
  messages.value.push({ role: "user", content: input });
  userInput.value = "";
  loading.value = true;

  try {
    const res = await axios.post(
      "https://api.deepseek.com/v1/chat/completions",
      {
        model: "deepseek-chat",
        messages: messages.value,
      },
      {
        headers: {
          Authorization: `Bearer ${API_KEY}`,
          "Content-Type": "application/json",
        },
      }
    );

    const reply = res.data.choices[0].message.content;
    messages.value.push({ role: "assistant", content: reply });
  } catch (err) {
    console.error("AI 回复失败:", err);
  } finally {
    loading.value = false;
  }
};

// 面试结束
const finishInterview = () => {
  isFinished.value = true;
  downloadQA();
};

// 导出问答 JSON 文件
const downloadQA = () => {
  const dataStr =
    "data:text/json;charset=utf-8," +
    encodeURIComponent(JSON.stringify(messages.value, null, 2));
  const link = document.createElement("a");
  link.href = dataStr;
  link.download = "interview_chat.json";
  link.click();
};
</script>

<style scoped>
.interview-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 16px;
  border-radius: 12px;
  background: #f9f9f9;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.title {
  text-align: center;
  margin-bottom: 20px;
}
.chat-box {
  max-height: 500px;
  overflow-y: auto;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
.chat-message {
  padding: 8px 12px;
  border-radius: 8px;
  margin: 6px 0;
  max-width: 70%;
  word-wrap: break-word;
}
.chat-message.assistant {
  background: #e8f0fe;
  text-align: left;
}
.chat-message.user {
  background: #d1ffd6;
  text-align: right;
  margin-left: auto;
}
.input-box {
  margin-top: 10px;
}
textarea {
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #ccc;
}
.actions {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
button {
  padding: 6px 12px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}
button:hover {
  opacity: 0.8;
}
.end-message {
  text-align: center;
  font-size: 16px;
  color: #333;
  margin-top: 20px;
}
</style>
